#{extends 'overlay.html' /}

<script type="text/javascript" src="@{'/public/javascripts/jquery.autocomplete.js/'}"></script>
<div id="crudBlank" class="${type.name}">

	<h2 id="crudBlankTitle">&{'crud.blank.title', type.modelName}</h2>
	
	<div class="objectForm">
	#{form action:@create(), enctype:'multipart/form-data'}
		#{crud.form fields:['componentID', 'description', 'priority', 'notes', 'dependentStories']}
		
		#{crud.custom 'componentID'}
			<label for="object_componentID">component*</label>
					<select id="object_componentID" name="object.componentID@id">
								#{list items:project.components ,as :'component'}
									<option value="${component.id}">${component.name}</option>
								#{/list}		
					</select>
		    <span class="crudHelp">*</span>
		#{/crud.custom}
		
		#{crud.custom 'description' }
			
					<label for="object_description">Description	</label>
			
						<textarea id="example"  name="object.description" ROWS="4" COLS="60" onclick="f();"></textarea>
		  
		    <span class="crudHelp">*</span>
		  <div style="display:none" class="d">Ex: As a/an product role, description</div>
		    <span class="error"></span>
		    </div>
		#{/crud.custom}
		
			#{crud.custom 'priority'}
		<div name="view-more" style="display:none">
				<label for="object_priority">priority</label>
				<select id="object_priority" name="object.priority">
					#{list items:project.priorities ,as :'priority'}
									<option value="${priority.id}">${priority.title}</option>
					#{/list}
				</select>
				<span class="crudHelp">*</span>
				</div>
		#{/crud.custom}
		
		
		#{crud.custom 'dependentStories'}
		<div name="view-more" style="display:none">
				<label for="object_dependentStories">dependent stories</label>
				<input type="hidden" name="object.dependentStories@id" value="" />
				<select id="object_dependentStories" name="object.dependentStories@id" multiple="yes">
							#{list items:stories ,as :'story'}
								#{if story.deleted == false}
									<option value="${story.id}">${story.description}</option>
								#{/if}
							#{/list}		
				</select>
    			</div>
		#{/crud.custom}
		
	#{/crud.form}
	<a href="#" onclick = "toggleOptions()" name="view-more-link">View more options</a>
		<p class="crudButtons">
			<input type="submit" name="_save" value="&{'crud.save', type.modelName}" onclick="product_role(${story.id});"/>
			<input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" onclick="product_role();" />
			<input type="submit" name="_saveAndAddAnother" value="&{'crud.saveAndAddAnother', type.modelName}" onclick="product_role();"/>
		</p>
	#{/form}
	</div>

<script type="text/javascript">
	var data='${productRoles}'.split("-");
	$("#example").autocomplete(data);
	
	function f()
	{
		$('.d').css('display','inline-block');
	}
	
	function product_role(id)
	{
		$.post('/Storys/addProductRole' ,			
			{projectID:id,						
			description:$("#example").val()});
	} 
	
function setDesc()
{
	for(var i=0; i< $('#object_productRole').length +1;i++)
	{
	if(document.getElementById('object_productRole').options[i].selected== true)
		{
			document.getElementById('descRole').options[i].selected=true;
		}
		else
		{
			document.getElementById('descRole').options[i].selected=false;
		}
	}
	}

function setRole()
{
	for(var i=0; i< $('#object_productRole').length +1;i++)
	{
	if(document.getElementById('descRole').options[i].selected== true)
		{
			document.getElementById('object_productRole').options[i].selected=true;
		}
		else
		{
			document.getElementById('object_productRole').options[i].selected=false;
		}
	}
}
function toggleOptions(){
	current_text = $("[name='view-more-link']").text();
	if(current_text == "View more options"){
		$("[name='view-more-link']").text("Hide extra options");
		$("[name='view-more']").slideDown();
	}
	else
	{
		$("[name='view-more-link']").text("View more options");
		$("[name='view-more']").slideUp();
	}	
}
</script>